<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let path = 'path://M214,1079l8-6h16l8,6-8,6H222Z';
    let option = {
        backgroundColor: '#0e2147',
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (e) {
                if (e.length > 1) {
                    let S = e[1].data - e[0].data;
                    return e[0].axisValue + ":<br>差额=当前－年初<br>=" + S;
                } else if (e.length = 1) {
                    return e[0].axisValue + ":<br>" + e[0].seriesName + "=" + e[0].data;
                }

            }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '4%',
            top: '16%',
            containLabel: true
        },
        legend: {
            data: [],
            left: 'center',
            top: '5%',
            textStyle: {
                color: "#00ffff",
                fontSize: 20
            },
            itemWidth: 12,
            itemHeight: 10,
            color: '#242424'
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLine: {
                lineStyle: {
                    show: true,
                    lineStyle: {
                        color: '#6A989E',
                    }
                }
            },
            axisLabel: {
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#fff',
                    fontWeight: 'normal',
                    fontSize: 16,
                    lineHeight: 22
                }
            }
        },
        yAxis: {
            type: 'value',
            name: "Y",
            nameTextStyle: {
                color: '#ffffff',
                fontSize: 16
            },
            axisLine: {
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(135,140,147,0.8)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(135,140,147,1)' //左侧显示线
                }
            },
            axisLabel: {
                formatter: '{value}',
                color: '#fff',
                fontSize: 16
            }
        },
        series: [{
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [-20, -4],
            symbolPosition: 'end',
            z: 12,
            color: "#3440FF",
            data: []
        }, {
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [-20, 4],
            z: 12,
            color: "rgba(126,192,238,0.6)",
            data: []
        }, {
            name: '',
            type: 'bar',
            barWidth: '30',
            itemStyle: {
                normal: {
                    opacity: .7,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'blue'
                    }, {
                        offset: 1,
                        color: '#7EC0EE'
                    }]),
                    barBorderRadius: 0,
                },
            },
            label: {
                show: true,
                position: ['-95%', '-20'],
                color: '#00f8ff',
                fontSize: 16,
            },
            data: []
        }, {
            name: '',
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [20, 4],
            color: "#FFC0CB",
            z: 12,
            data: []
        }, {
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [20, -4],
            symbolPosition: 'end',
            z: 12,
            color: "#FF1155",
            data: []
        }, {
            name: '',
            type: 'bar',
            barWidth: '30',
            itemStyle: {
                normal: {
                    opacity: .7,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF2246'
                    }, {
                        offset: 1,
                        color: '#FFC0CB'

                    }]),
                    barBorderRadius: 0,
                }

            },
            label: {
                show: true,
                position: ['95%', '-20'],
                color: '#00f8ff',
                fontSize: 16,
            },
            data: []
        },
        ]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/bar/two/1',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                if(Array.isArray(option.xAxis)) {
                    result.data.xAxis.forEach(function (item, index) {
                        option.xAxis[index].data = item.data;
                        option.xAxis[index].type = item.type;
                        if (item.name) {
                            option.xAxis[index].name = item.name;
                        }
                    });
                }else {
                    let item = result.data.xAxis[0];
                    option.xAxis.data = item.data;
                    option.xAxis.type = item.type;
                    if (item.name) {
                        option.xAxis.name = item.name;
                    }
                }

                if(Array.isArray(option.yAxis)) {
                    result.data.yAxis.forEach(function (item, index) {
                        option.yAxis[index].type = item.type;
                        option.yAxis[index].name = item.name;
                        if (item.data) {
                            option.yAxis[index].data = item.data;
                        }
                    });
                }else {
                    let item = result.data.yAxis[0];
                    option.yAxis.type = item.type;
                    option.yAxis.name = item.name;
                    if (item.data) {
                        option.yAxis.data = item.data;
                    }
                }

                option.series.forEach(function (item,index) {
                    if(index < 3) {
                        item.data = result.data.series[0].data;
                    }else {
                        item.data = result.data.series[1].data;
                    }
                    if(index == 2){
                        item.name = result.data.series[0].name;
                    }
                    if(index == 5){
                        item.name = result.data.series[1].name;
                    }
                });

                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
